<template>
	<!-- 动画库 -->
	<view class="animation">
		<view class="animation-btn" @click="to('box','top',1)" hover-class="active">
			向上移动
		</view>
		<view class="animation-btn" @click="to('box','bottom',1)"  hover-class="active">
			向下移动
		</view>
		<view class="animation-btn" @click="to('box','left',1)"  hover-class="active">
			向左移动
		</view>
		<view class="animation-btn" @click="to('box','right',1)"  hover-class="active">
			向右移动
		</view>
		<!-- #ifdef H5 -->
		<view class="animation-btn" @click="to('box','opacity',1)"  hover-class="active">
			透明
		</view>
		<!-- #endif -->
		<view class="animation-btn" @click="to('box','scale',1)"  hover-class="active">
			放大
		</view>
		<!-- #ifdef H5 -->
		<view class="animation-btn" @click="dele"  hover-class="active">
			清除位置
		</view>
		<!-- #endif -->
		<view class="box" ref="box" id="box" :style="'transform:' + transform + ';'">
			
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				value:-1,
				transform:""
			}
		},
		methods:{
			// 点击事件
			to(e,position,d){
				// #ifdef APP-PLUS
				// let view = uni.createSelectorQuery().in(this);
				// view.select('#box').boundingClientRect(data => {
				//   console.log("得到布局位置信息" + JSON.stringify(data));
				// }).exec();
				switch (position) {
					case 'top':
						this.transform = `translate(0px,-100px)`
						setTimeout(()=>{
							this.transform = `translate(0px,0px)`
						},1000)
						break;
					case 'bottom':
						this.transform = `translate(0px,100px)`
						setTimeout(()=>{
							this.transform = `translate(0px,0px)`
						},1000)
						break;
					case 'left':
						this.transform = `translateX(100px)`
						setTimeout(()=>{
							this.transform = `translateX(0)`
						},1000)
						break;
					case 'right':
						this.transform = `translateX(-100px)`
						setTimeout(()=>{
							this.transform = `translateX(0)`
						},1000)
						break;
					case 'scale':
						this.transform = `scale(2,2)`
						setTimeout(()=>{
							this.transform = `scale(1,1)`
						},1000)
						break;
				}
				
				// #endif
				// #ifdef H5
				// 为了使用便捷每个方法不可重复点击使用（可自行修改主动清除位移的痕迹，每次动画运动都在被记录在样式）/每次使用都清除一次位置
				if(this.value){
					if(position == "opacity"){
						this.$refs[e].$el.style[position] = 0;
						setTimeout(()=>{
							this.$refs[e].$el.style[position] = 1;
						},1000)
						return
					}
					if(position == "scale"){
						this.$refs[e].$el.style.transform = 'scale(2,2)';
						setTimeout(()=>{
							this.$refs[e].$el.style.transform = 'scale(1,1)';
						},1000)
						return
					}
					if(position == "bottom"){
						this.$refs[e].$el.style[position] = -100 + 'px';
						setTimeout(()=>{
							this.$refs[e].$el.style[position] = 0 + 'px';
						},1000)
						return
					}
					if(position == "top"){
						this.$refs[e].$el.style[position] = -100 + 'px';
						setTimeout(()=>{
							this.$refs[e].$el.style[position] = 0 + 'px';
						},1000)
						return
					}
					this.$refs[e].$el.style[position] = 100 + 'px';
					setTimeout(()=>{
						this.$refs[e].$el.style[position] = 0 + 'px';
					},1000)
				}
				// else{
				// 	if(position == "opacity"){
				// 		this.$refs[e].$el.style[position] = 1;
				// 		return
				// 	}
				// 	if(position == "scale"){
				// 		this.$refs[e].$el.style.transform = 'scale(1,1)';
				// 		return
				// 	}
				// 	if(position == "bottom"){
				// 		this.$refs[e].$el.style[position] = 100 + 'px';
				// 		return
				// 	}
				// 	if(position == "top"){
				// 		this.$refs[e].$el.style[position] = 100 + 'px';
				// 		return
				// 	}
				// 	this.$refs[e].$el.style[position] = -100 + 'px';
				// }
				// #endif
				
			},
			dele(){
				let e = 'box'
				this.$refs[e].$el.style['top'] = 0 + 'px';
				this.$refs[e].$el.style['bottom'] = 100 + 'rpx';
				this.$refs[e].$el.style['right'] = 0 + 'px';
				this.$refs[e].$el.style['left'] = 0 + 'px';
				this.$refs[e].$el.style.transform = 'scale(1,1)';
				this.$refs[e].$el.style['opacity'] = 1;
			}
		}
	}
</script>

<style scoped>
	page{
		font-size: 30rpx;
	}
	.animation{
		padding: 0 30rpx;
	}
	.animation-btn{
		background: #4CD964;
		border-radius: 20rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		margin-bottom: 20rpx;
	}
	.active{
		background: #999999;
	}
	.box{
		position: absolute;
		width: 150rpx;
		height: 150rpx;
		background: #4CD964;
		opacity: 1;
		bottom: 100rpx;
		top: 0;
		left: 0;
		right: 0;
		margin: auto;
		transform:scale(1,1);
		transition: .4s all linear;
	}
</style>
